<template>
	<div class="container">
		<JxNavbar title='我的评论' />
		<div class="list">
			<div class="list-item" v-for="(item, index) in listData" :key="item['_id']">
				<div class="item-header">
					<div class="header-left">
						<image :src="item['user']['avatar'] || $surl('/avatar.png')" mode="aspectFill"></image>
						<div class="user-more">
							<text class="nickname">{{ item['user']['nickname'] }}</text>
							<text class="time">{{ item['shortDate'] }}</text>
						</div>
					</div>
					<i class="iconfont icon-more" @click.stop="deleteItem(item)"></i>
				</div>
				<div class="item-content">{{ item['content'] }}</div>
				<div class="item-article" @click="toDetail(item['article_id'])">
					<text>原文：</text>
					<text>{{ item['articleData']['body'] || item['articleData']['title'] || '已被删除' }}</text>
				</div>
			</div>
		</div>
		<JxLoadMore :list="listData" :loadStatus='loadStatus' />
	</div>
</template>

<script setup>
import { ref } from 'vue';
import file from '@/utils/file/index.js'
import tools from '@/utils/tools/index.js'
import comments from '@/api/comments/index'
import { onReachBottom } from '@dcloudio/uni-app';
import JxNavbar from '@/components/navbar/index.vue'
import JxLoadMore from '@/components/LoadMore/index.vue'

const page = ref(1);
const listData = ref([]);
const loadStatus = ref('loadmore');

async function initData() {
	page.value = 1;
	tools.loading('page');
	listData.value = await getList();
	uni.hideLoading()
}

async function getList() {
	loadStatus.value = 'loading'
	const response = await comments.my({ page: page.value, limit: 10 });
	if (response['code'] == 200) {
		const list = response['data'].map(item => {
			item['shortDate'] = tools.shortDate(item['create_date'])
			item['user']['avatar'] = file.getFileUrl(item['user']['avatar']);
			return item;
		})
		loadStatus.value = list.length < 10 ? 'nomore' : 'loadmore';
		return list;
	}
	return [];
}

async function deleteItem(item) {
	uni.showActionSheet({
		itemList: ['删除'],
		success: async ({ tapIndex }) => {
			if (tapIndex === 0) {
				const response = await comments.delete({ article_id: item['article_id'], id: item['_id'] });
				if (response['code'] === 200) {
					listData.value = listData.value.filter(itemL => itemL['_id'] !== item['_id']);
					tools.toast({ title: '删除成功' })
				}
			}
		}
	})
}

function toDetail(article_id) {
	uni.navigateTo({
		url: '/pages/sub/main/detail/index?id=' + article_id
	})
}

onReachBottom(async () => {
	if (loadStatus.value === 'loadmore') {
		page.value++;
		const list = await getList();
		listData.value = listData.value.concat(list);
	}
})

initData();
</script>

<style lang="scss" scoped>
.container {
	.list {
		padding: 0 $side-width;

		.list-item {
			margin-top: $side-width;
			padding-bottom: $side-width;

			.item-header {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.header-left {
					display: flex;
					align-items: center;

					image {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
					}

					.user-more {
						display: flex;
						height: 70rpx;
						justify-content: space-between;
						flex-direction: column;
						margin-left: 16rpx;

						.nickname {
							font-weight: 500;
							font-size: 30rpx;
							line-height: 1;
						}

						.time {
							color: $uv-tips-color;
							font-size: 26rpx;
							line-height: 1;
						}
					}
				}

				.icon-more {
					color: $uv-tips-color;
				}
			}

			.item-content {
				margin-left: 86rpx;
				margin-top: $side-width;
			}

			.item-article {
				background: $uv-bg-color;
				border-radius: 3px;
				margin-left: 86rpx;
				margin-top: $side-width;
				padding: $side-width;
				color: $uv-tips-color;
			}
		}
	}
}
</style>